import React, { Component } from 'react'
import { flushSync } from 'react-dom'
/*
  在React18版本之前，setState是同步还是异步的要分情况
  在react的合成事件中，它是异步的
*/
export default class TestState extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  increment = () => {
    // console.log('count1', this.state.count);
    // flushSync(() => {
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    //   console.log('count2', this.state.count);
    // })
    // flushSync(() => {
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    //   console.log('count3', this.state.count);
    // })
  }
  //react生命周期的函数
  componentDidMount() {
    console.log('1、', this.state.count);
    document.querySelector('#btn').addEventListener('click', () => {

      flushSync(()=>{{
        this.setState({
          count: this.state.count + 1
        })
        console.log('2、', this.state.count);
      }})
     
      flushSync(()=>{
        this.setState({
          count: this.state.count + 1
        })
        console.log('3、', this.state.count);
      })
     
    })
  }
  render() {
    console.log('88888888888888888');
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>测试异步方法</button>
        <button id='btn'>原生js方式</button>
      </div>
    )
  }
}
